import 'dart:io';

import 'package:ac/common/style.dart';
import 'package:ac/widget/ac_app_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'ac_publish_logic.dart';

class AcPublishPage extends StatelessWidget {
  final logic = Get.find<AcPublishLogic>();
  final state = Get.find<AcPublishLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AcAppbar(
        title: "",
        actions: [
          Row(
            children: [
              GestureDetector(
                onTap: logic.publish,
                child: Container(
                  height: 24.h,
                  width: 48.w,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12.w),
                    color: const Color(0xff2A2828),
                  ),
                  child: Text(
                    "Post",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 14.sp,
                      fontFamily: 'Inter',
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
              ),
              SizedBox(width: 15.w)
            ],
          )
        ],
      ),
      body: Listener(
        onPointerUp: (event) {
          FocusScope.of(context).unfocus();
        },
        child: Container(
          color: Colors.white,
          padding: EdgeInsets.symmetric(horizontal: 16.w),
          child: Column(
            children: [
              SizedBox(height: 20.h),
              _title(),
              SizedBox(height: 20.h),
              Container(
                height: 0.5.w,
                width: double.infinity,
                color: const Color(0xffcccccc),
              ),
              SizedBox(height: 20.h),
              _content(),
              SizedBox(height: 32.h),
              _images(),
            ],
          ),
        ),
      ),
    );
  }

  TextField _title() {
    return TextField(
      controller: state.titleController,
      style: TextStyle(
        color: textColorBlack,
        fontSize: 20.sp,
        fontFamily: 'Inter',
        fontWeight: FontWeight.w500,
      ),
      decoration: InputDecoration(
        hintText: "Enter your title:",
        hintStyle: TextStyle(
          color: Colors.black.withOpacity(0.5),
          fontSize: 20.sp,
          fontFamily: 'Inter',
          fontWeight: FontWeight.w500,
        ),
        isCollapsed: true,
        isDense: true,
        border: InputBorder.none,
      ),
    );
  }

  Container _content() {
    return Container(
      padding: EdgeInsets.all(12.w),
      height: 231.h,
      decoration: BoxDecoration(
        color: const Color(0xfff8f8f8),
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Expanded(
            child: TextField(
              controller: state.contentController,
              style: TextStyle(
                color: textColorBlack,
                fontSize: 12.sp,
                fontFamily: 'Inter',
                fontWeight: FontWeight.w400,
              ),
              maxLines: 20,
              maxLength: 600,
              decoration: InputDecoration(
                hintText: "start creating your ideas.....",
                hintStyle: TextStyle(
                  color: Colors.black.withOpacity(0.5),
                  fontSize: 12.sp,
                  fontFamily: 'Inter',
                  fontWeight: FontWeight.w400,
                ),
                isCollapsed: true,
                isDense: true,
                border: InputBorder.none,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _images() {
    return Obx(() {
      return Container(
        height: 128.w,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemBuilder: (BuildContext context, int index) {
            if (index == state.imageList.length) {
              return GestureDetector(
                onTap: logic.addImage,
                child: Container(
                  width: 107.w,
                  height: 128.w,
                  decoration: BoxDecoration(
                    color: const Color(0xfff5f5f5),
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset(
                        "images/icon_add.png",
                        width: 24.w,
                        height: 24.w,
                      ),
                    ],
                  ),
                ),
              );
            }
            return Container(
              width: 107.w,
              height: 128.w,
              margin: EdgeInsets.only(right: 12.w),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12.r),
                child: Stack(
                  children: [
                    Image.file(
                      File(state.imageList[index]),
                      width: 107.w,
                      height: 128.w,
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      right: 0,
                      top: 0,
                      child: GestureDetector(
                        onTap: () => logic.deleteImage(index),
                        child: Image.asset(
                          "images/icon_delete.png",
                          width: 24.w,
                          height: 24.w,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
          itemCount: state.imageList.length + 1,
        ),
      );
    });
  }
}
